import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import {
  CLASS_ROOM_RIGHT_SCALE,
  LIVE_AREA,
  MARGIN_TOP,
  LIVE_AREA_HEIGHT,
  LIVE_HEIGHT
} from '../../constant';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent'
  },
  videoArea: {
    position: 'absolute',
    right: 0,
    top: MARGIN_TOP,
    bottom: MARGIN_TOP,
    width: LIVE_AREA
  },
  teacher: {
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT,
    backgroundColor: 'transparent'
  },
  leftLine: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  topLine: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    height: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  rightLine: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    width: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  bottomLine: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    left: 0,
    height: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#F3F3F3'
  },
  nameContent: {
    position: 'absolute',
    left: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    bottom: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(152),
    height: phonePx(24) * CLASS_ROOM_RIGHT_SCALE,
    zIndex: 30,
    flexDirection: 'row'
  },
  name: {
    marginTop: phonePx(5) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: '500',
    fontSize: phonePx(12) * CLASS_ROOM_RIGHT_SCALE,
    lineHeight: phonePx(17) * CLASS_ROOM_RIGHT_SCALE,
    color: '#ffffff',
    marginLeft: phonePx(8) * CLASS_ROOM_RIGHT_SCALE
  },
  corner: {
    position: 'absolute',
    left: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    top: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    zIndex: 31
  },
  kidContent: {
    flex: 1,
    width: LIVE_AREA,
    alignItems: 'center'
  },
  list: {
    height: LIVE_HEIGHT * 2 + phonePx(8) * CLASS_ROOM_RIGHT_SCALE,
    width: LIVE_AREA
  },
  card: {
    height: LIVE_HEIGHT * 2 + phonePx(8) * CLASS_ROOM_RIGHT_SCALE,
    width: LIVE_AREA,
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: phonePx(2) * CLASS_ROOM_RIGHT_SCALE
  },
  content: {
    flex: 1,
    backgroundColor: '#F3F3F3'
  },
  pageContent: {
    width: phonePx(20) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#ffffff',
    overflow: 'hidden'
  },
  current: {
    position: 'absolute',
    top: 0,
    width: phonePx(12) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#FDD753'
  },
  left: {
    left: 0
  },
  right: {
    right: 0
  },
  parent: {
    position: 'absolute',
    left: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    bottom: phonePx(40) * CLASS_ROOM_RIGHT_SCALE
  }
});
